<template>
    <div class="user">
        <!-- 弹框 -->
        <el-button type="text" @click="add"></el-button>
        <el-dialog title="添加信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>
                <el-form ref="form" :model="form">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.region"></el-input>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查询 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.user" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询 -->
        <!-- 用户信息 -->
        <el-table :data="tableData" border>
            <el-table-column label="日期">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 按钮 -->
        <el-row>
            <el-button type="primary" @click="add">添加</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formInline: {
                user: '',
                region: ''
            },
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王发发',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小龙',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小凤',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ]
        };
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row, '1111');
            this.$prompt('请输入姓名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(({ value }) => {
                    this.tableData[index].name = value;
                    this.$message({
                        type: 'success',
                        message: '你修改后的名字是: ' + value
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.tableData.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        onSubmit() {
            // 1.
            // for (let i = 0; i < this.tableData.length; i++) {
            //     if (this.tableData[i].name === this.formInline.user) {
            //         this.$alert('查询结果', this.tableData[i].name, {
            //             confirmButtonText: '确定'
            //         });
            //     }
            // }
            // 2.
            // this.tableData.map((item) => {
            //     if (item.name === this.formInline.user) {
            //         this.$alert('查询结果', item.name, {
            //             confirmButtonText: '确定'
            //         });
            //     }
            // });
            // 3.第一个参数是遍历的数组内容，
            // 第二个参数是对应的数组索引，
            // 第三个参数是数组本身
            this.tableData.forEach((item, index) => {
                console.log(item);
                if (item.name === this.formInline.user) {
                    this.$alert('查询结果', item.name, {
                        confirmButtonText: '确定'
                    });
                }
            });
            this.formInline.user = '';
        },
        add() {
            this.dialogVisible = true;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        sure() {
            this.tableData.push({
                date: '2016-05-03',
                name: this.form.name,
                address: this.form.region
            });
            this.dialogVisible = false;
            this.form.name = '';
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-top: 20px;
}
</style>
